<template>

  <div :style="style">
    <slot></slot>
  </div>

</template>


<script setup name="Grid">

import {
  computed,
  inject,
} from "vue";


const props = defineProps({
  searchCol: {
    default: {xs: 1, sm: 2, md: 2, lg: 3, xl: 4}
  },
  // grid布局的间距，数字：20 ，或者 [20,10]
  gap: {
    default: 0
  }
})


// onBeforeMount(() => props.collapsed && findIndex());

// 注入 gap 间距
// provide("gap", Array.isArray(props.gap) ? props.gap[0] : props.gap);

// 注入响应式断点
const breakPoint = inject('breakPoint')

const findIndex = () => {
  let fields = []

}


// 获取动态cols
const gridCols = computed(() => {
  if (typeof props.searchCol === "object") return props.searchCol[breakPoint.value] ?? props.searchCol;
  return props.searchCol;
});


// 设置grid布局的间距
const gridGap = computed(() => {
  if (typeof props.gap === "number") return `${props.gap}px`;
  if (Array.isArray(props.gap)) return `${props.gap[1]}px ${props.gap[0]}px`;
  return "unset";
});

// 设置 style
// https://blog.csdn.net/qq_18798149/article/details/133872183?ops_request_misc=%257B%2522request%255Fid%2522%253A%2522170574016416800180642391%2522%252C%2522scm%2522%253A%252220140713.130102334.pc%255Fall.%2522%257D&request_id=170574016416800180642391&biz_id=0&utm_medium=distribute.pc_search_result.none-task-blog-2~all~first_rank_ecpm_v1~rank_v31_ecpm-3-133872183-null-null.142^v99^control&utm_term=grid%E7%BD%91%E6%A0%BC%E5%B8%83%E5%B1%80%EF%BC%8C%E6%AF%94flex&spm=1018.2226.3001.4187

const style = computed(() => {
  return {
    display: "grid",
    // 设置统一间距
    gridGap: gridGap.value,
    gridTemplateColumns: `repeat(${gridCols.value}, minmax(0, 1fr))`
  };
});

</script>

<style scoped lang="scss">

</style>
